<template>
  <view style="padding: 30rpx">

    <view class="steps">
      <view class="stepItem">
        <uv-icon v-if="current" name="checkmark" :color="current?themConfig.theme.color:''" size="20"></uv-icon>
        <uv-icon v-else name="close-circle" color="#f56c6c" size="20"></uv-icon>
        <view style="color: #303133;font-size: 12px;margin-top: 5px">
          {{current?'已完成跑手认证':'待认证跑手'}}
        </view>
      </view>

      <view class="stepItem">
        <uv-icon v-if="userAccount" name="checkmark" :color="current?themConfig.theme.color:''" size="20"></uv-icon>
        <uv-icon v-else name="close-circle" color="#f56c6c" size="20"></uv-icon>
        <view @click="toSetSettleCard" style="color: #303133;font-size: 12px;margin-top: 5px">
          {{userAccount?'已完成提现绑卡':'待完成提现帮卡 ->'}}
        </view>
      </view>
    </view>

<!--    <view style="padding:0 30%">-->
<!--      <uv-divider text=""></uv-divider>-->
<!--    </view>-->

    <view class="infoCard">
      <uv-form labelPosition="left" :model="formData" :labelWidth="100" :rules="rules" ref="form">
        <uv-form-item label="真实姓名" prop="realName" borderBottom required>
          <template v-slot:right>
            <uv-input inputAlign="right" placeholder="真名" v-model="formData.realName" border="none">
            </uv-input>
          </template>
        </uv-form-item>

        <uv-form-item label="联系电话" prop="phone" borderBottom required>
          <template v-slot:right>
            <uv-input inputAlign="right" placeholder="联系手机" v-model="formData.phone" border="none">
            </uv-input>
          </template>
        </uv-form-item>

        <uv-form-item label="学生证照" prop="studentIdPhotoFront" borderBottom required>
          <template v-slot:right>
            <UvUpload :dataList="formData.studentIdPhotoFront?[formData.studentIdPhotoFront]:formData.studentIdPhotoFront"
                      :params="{name:'studentIdPhotoFront'}"
                      :upload_max="1" @uploadChange="uploadSuccess"/>
          </template>
        </uv-form-item>

        <uv-form-item label="认证说明" prop="content" borderBottom required>
          <uv-textarea placeholder="认证说明" v-model="formData.content">
          </uv-textarea>
        </uv-form-item>

        <uv-form-item @click="switchSchoolTab" label="学校" prop="schoolName" required borderBottom>
          <uv-input inputAlign="right" readonly placeholder="选择学校" v-model="formData.schoolName" border="none">
          </uv-input>
          <template v-slot:right>
            <uv-icon name="arrow-right"></uv-icon>
          </template>
        </uv-form-item>


        <uv-form-item label="认证状态" prop="state" borderBottom>
          <template v-slot:right>
            <!--   学生认证状态:0=待审核，1=审核通过，2=审核不通过-->
            <text style="color:#f9ae3d" v-if="formData.state === 0">
              审核中
            </text>
            <text style="color:#5ac725" v-else-if="formData.state === 1">
              审核通过
            </text>

            <text style="color:#f56c6c" v-else-if="formData.state === 2">
              {{ '审核不通过：' + formData.refuseReason }}
            </text>

            <text style="color:#f9ae3d" v-else>
              待认证
            </text>
          </template>
        </uv-form-item>


        <uv-form-item label="接单电子协议" prop="state" borderBottom>
          <template v-slot:right>
            <view style="display: flex;">

              <text :style="{
                    color:themConfig.theme.subColor,marginRight:'20rpx'
                  }" @click="readAgreement">勾选代表同意协议
              </text>

              <uv-checkbox-group v-model="isReadAggreement">
                <uv-checkbox
                    :activeColor="themConfig.theme.subColor"
                    :customStyle="{marginBottom: '8px'}"
                    v-for="(item, index) in [{name:'',value: 1}]"
                    :key="index" :label="item.name"
                    :name="item.value"
                ></uv-checkbox>
              </uv-checkbox-group>
            </view>
          </template>
        </uv-form-item>


      </uv-form>

    </view>

    <view style="margin: 20rpx;text-align: center;color: #909399">
      接单认证前需先完善用户基础信息、绑定学校
    </view>
    <view style="width: 100%;margin-top: 20px">
      <uv-button
          :disabled="(!(formData.state==null || formData.state===2))"
          @click="submit" text="提交"
          :color="btnColor()"></uv-button>
    </view>

    <view class="rules">
      <view class="table" v-for="item in commissionRules">
        <view class="th">{{ item.ruleName }}</view>
        <view class="tr-wrapper">
          <view class="tr" v-if="tr.code !=='inviter' || (tr.code==='inviter' && tr.value>0)" v-for="tr in item.rules">
            <view class="td">{{ tr.label }}</view>
            <view class="td">{{ tr.value }}%</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import StatusNav from '@/components/school/statusNav';
import {mapGetters} from "vuex";
import {toLogin} from '@/libs/login.js';
import diyJson from '@/config/diy.js';
import * as MemberApi from '@/api/member/user.js'
import UvUpload from '@/components/school/uv-upload';
import * as AccountInfo from '@/api/member/memberAccountCard.js'
const app = getApp();

export default {
  computed: mapGetters(['isLogin', 'userInfo', 'memberPermissions']),
  components: {
    StatusNav,
    UvUpload,
  },
  data() {
    return {
      commissionRules: [],
      themConfig: diyJson.commonStyle,
      formData: {},
      isReadAggreement: [],
      current: 0,
      memberPermissionsCode: [],
      userAccount: undefined,
      rules: {
        'realName': {
          type: 'string',
          required: true,
          message: '请填写姓名',
          trigger: ['blur', 'change']
        },
        'content': {
          type: 'string',
          max: 250,
          required: true,
          message: '请填写申请理由',
          trigger: ['blur', 'change']
        },
        'phone': {
          type: 'string',
          max: 11,
          required: true,
          message: '请填写联系电话',
          trigger: ['blur', 'change']
        },
        'studentIdPhotoFront': {
          type: 'string',
          required: true,
          message: '请上传学生证件',
          trigger: ['blur', 'change']
        },
      },
      statusNavProperties: { // 筛选条件
        title: "学生认证",
        setStyle: {
          bgColor: 'white',
          enableBack: true,
          titleStyle: {}
        }
      },

    };
  },
  onPullDownRefresh() {

  },
  onLoad: function (options) {
    if (!this.isLogin) {
      toLogin();
      return;
    }

    this.initInfo();
  },

  onShow() {
    this.getAccount();
  },

  onReady() {
  },

  created() {
    let pageBody = {
      ...this.pageBody
    }
    this.pageBody = pageBody;
  },
  mounted() {
  },

  methods: {

    initInfo(){
      this.getUserInfo();
      this.getAccount();
      this.getCommissionRule();
      let data = {};
      data.id = this.userInfo.id;
      data.state = null;
      if (this.userInfo.studentInfo) {
        data.content = this.userInfo.studentInfo.content;
        data.studentIdPhotoFront = this.userInfo.studentInfo.studentIdPhotoFront;
        data.realName = this.userInfo.studentInfo.realName;
        data.phone = this.userInfo.studentInfo.phone;
        data.refuseReason = this.userInfo.studentInfo.refuseReason;
        data.state = this.userInfo.studentInfo.state;
        data.studentNo = this.userInfo.studentInfo.studentNo;
        let schoolInfo = this.userInfo.studentInfo.schoolInfo || this.userInfo.schoolInfo;
        if (schoolInfo) {
          data.schoolId = schoolInfo.schoolId;
          data.schoolName = schoolInfo.schoolName;
        }
      } else {
        data.phone = this.userInfo.phone;
        let schoolInfo = this.userInfo.schoolInfo;
        if (schoolInfo) {
          data.schoolId = schoolInfo.schoolId;
          data.schoolName = schoolInfo.schoolName;
        }
      }

      if (data.state === 0 || data.state === 1) {
        this.current = 1;
        this.isReadAggreement = [1];
      }

      for (let i = 0; i < this.memberPermissions.length; i++) {
        this.memberPermissionsCode.push(this.memberPermissions[i].code);
      }
      this.formData = data;

      console.log('formData', this.formData)
    },

    getAccount(){
      AccountInfo.getByUserId(this.userInfo.id).then(res => {
        this.userAccount = res.data;
      })
    },

    toSetSettleCard(){
      uni.navigateTo({
        url: '/pages/users/user_set_settle_info/index',
      })
    },

    // 分佣规则
    getCommissionRule() {
      MemberApi.getCommissionRule().then(res => {
        this.commissionRules = res.data;
      })
    },

    // 切换学校
    switchSchoolTab() {
      if (this.formData.state === 0 || this.formData.state === 1) {
        return;
      }
      uni.navigateTo({
        url: '/pages/school/info/index'
      })
    },

    setSchool(school) {
      console.log("school", school)
      let data = {...this.formData}
      // let that = this;
      data.schoolId = school.id;
      data.schoolName = school.schoolName;
      this.formData = data;
      // that.formData = data;
      // Object.assign({},{id:school.id,schoolName:school.schoolName});
    },

    async getUserInfo() {
      // 刷新用户信息
      await this.$store.dispatch('USERINFO');
      // 获取各种数量
    },

    readAgreement() {
      uni.navigateTo({
        url: `/pages/users/privacy/index?params=${encodeURIComponent(JSON.stringify({code: "200001"}))}`
      })
    },

    // 上传图片
    uploadSuccess(obj) {
      console.log("上传回调", obj)
      let name = obj.params.name;
      let array = obj.images;
      let photos = [];
      for (let i = 0; i < array.length; i++) {
        photos.push(array[i].url);
      }
      this.$nextTick(() => {
        this.formData[name] = photos.length > 0 ? photos[0] : null;
      });
      console.log("上传成功", this.formData)
    },

    goBack(url) {
      // #ifdef H5
      return history.back();
      // #endif
      // #ifndef H5
      return uni.navigateBack({
        delta: 1,
      })
      // #endif
    },

    btnColor() {
      return 'linear-gradient(to right,' + this.themConfig.theme.subColor + ',' + this.themConfig.theme.color + ')'
      // return' linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))';
    },

    submit() {

      if (this.isReadAggreement[0] !== 1) {
        uni.showToast({
          icon: 'error',
          title: '请阅读电子协议'
        })
        return;
      }

      if (this.formData.schoolId === '' || this.formData.schoolId === undefined) {
        uni.showToast({
          icon: 'error',
          title: '请选择学校'
        })
        return;
      }

      this.$refs.form.validate().then(res => {
        MemberApi.studentCert(this.formData).then(res => {
          uni.showToast({
            icon: 'success',
            title: '已提交，正在返回...'
          });
          setTimeout(() => {
            this.goBack();
          }, 1000)
        })
      }).catch(errors => {
        uni.showToast({
          icon: 'error',
          title: '请将表单填写完整'
        })
      })
    },

    getApp() {
      return app;
    },

  },
  onReachBottom() {
  }
}
</script>

<style scoped lang="scss">
.steps {
  background-color: white;
  padding-top: 15px;
  border-radius: 10px 10px 0 0;
  padding-bottom: 10px;
  display: flex;
  justify-content: space-around;
  .stepItem{
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
  }
}

.infoCard {
  background-color: white;
  padding: 10px 30px;
  border-radius: 0 0 10px 10px;
}

.payBtn {
  padding: 0 15px;
  display: flex;
  width: 100%;
}

.time {
  margin-top: 30rpx;
  display: flex;
}

.tip {
  margin: 40rpx 0;
}

.rules {
  background-color: white;
  margin: 40rpx 0;
}

.table {
  margin: 60rpx 0;
  border: 1px solid white;
  padding: 30rpx 10rpx;
  border-radius: 5px;
}

.th {
  text-align: center;
  margin: 10rpx 0;
}

.tr-wrapper {
  display: flex;
  justify-content: space-between;
  //border: 1px solid #909399;
}

.td {
  text-align: center;
  padding: 10rpx 30rpx;
  //border-right: 1px solid #909399;
}
</style>
